<template>
  <div class="wrapper">
    <template v-if="info.scene_type === '1' && ruleForm">
      <el-descriptions class="margin-top" title="基本信息" :column="2" border>
        <el-descriptions-item label="承运商名称">
          {{ ruleForm.carrier_name }}
        </el-descriptions-item>
        <el-descriptions-item label="申请付款原因">
          {{ ruleForm.apply_payment_reason }}
        </el-descriptions-item>
        <el-descriptions-item label="发票附件" :span="2">
          <div
            :key="index"
            v-for="(item, index) in ruleForm.invoice_attachment"
          >
            <a @click="() => handleOpen(item.url)" class="upload-name1">
              <i class="el-icon-document"></i>{{ item.url }}
            </a>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="发票类型">
          {{ ["专用发票", "普通发票"][this.ruleForm.invoice_type] }}
        </el-descriptions-item>
        <el-descriptions-item label="发票金额">
          {{ ruleForm.invoice_amount }}
        </el-descriptions-item>
        <el-descriptions-item label="发票税率">
          {{ ruleForm.invoice_rate }}%
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        style="margin-top: 20px"
        title="付款信息"
        :column="2"
        border
      >
        <el-descriptions-item label="承运商发票主体">
          {{ ruleForm.carrier_invoice_body.invoice_body_name }}
        </el-descriptions-item>
        <el-descriptions-item label="纳税人识别号">
          {{ ruleForm.carrier_invoice_body.taxpayer_identify_number }}
        </el-descriptions-item>
        <el-descriptions-item label="公司地址">
          {{ ruleForm.carrier_invoice_body.company_address }}
        </el-descriptions-item>
        <el-descriptions-item label="公司电话">
          {{ ruleForm.carrier_invoice_body.company_phone }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行">
          {{ ruleForm.carrier_invoice_body.bank_of_deposit }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行账号">
          {{ ruleForm.carrier_invoice_body.account_no }}
        </el-descriptions-item>
        <el-descriptions-item label="付款金额">
          {{ ruleForm.payment_amount }}
        </el-descriptions-item>
        <el-descriptions-item label="付款方式">
          {{ revenue_type_list[this.ruleForm.payment_method] }}
        </el-descriptions-item>
        <el-descriptions-item label="预计付款时间">
          <span v-time="ruleForm.payment_time"></span>
        </el-descriptions-item>
        <el-descriptions-item label="成本类型">
          {{ ruleForm.cost_type }}
        </el-descriptions-item>
        <el-descriptions-item label="我方发票主体">
          {{ ruleForm.carrier_invoice_body.invoice_body_name }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template v-if="info.scene_type === '2' && ruleForm">
      <el-descriptions class="margin-top" title="" :column="2" border>
        <el-descriptions-item label="申请名称">
          {{ ruleForm.apply_name }}
        </el-descriptions-item>
        <el-descriptions-item label="关联对象类型">
          {{ ["客户", "承运商", "渡石", "运单"][this.ruleForm.relation_type] }}
        </el-descriptions-item>
        <el-descriptions-item label="关联对象">
          {{ ruleForm.relation_name }}
        </el-descriptions-item>
        <el-descriptions-item label="费用分摊部门">
          {{ ruleForm.share_department_name }}
        </el-descriptions-item>
        <el-descriptions-item label="报销主体">
          {{ ruleForm.company_invoice_body_id_name }}
        </el-descriptions-item>
        <el-descriptions-item label="实际报销金额">
          {{ ruleForm.actual_reimburse_money }}
        </el-descriptions-item>
        <el-descriptions-item label="冲销备用金">
          {{ ruleForm.charge_off_money }}
        </el-descriptions-item>
        <el-descriptions-item label="费用明细汇总">
          {{ ruleForm.total_expense }}
        </el-descriptions-item>
        <el-descriptions-item label="收款人">
          {{ ruleForm.payee }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行">
          {{ ruleForm.open_bank_name }}
        </el-descriptions-item>
        <el-descriptions-item label="开户行账号">
          {{ ruleForm.open_bank_account }}
        </el-descriptions-item>
        <el-descriptions-item label="申请原因">
          {{ ruleForm.apply_reason }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="ruleForm.relation_type == '3'" key="001">
        <el-table
          :data="spanValcheckedRows"
          :span-method="objectSpanMethodspan"
          border
          @selection-change="tableRowClassName"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column prop="relation_no" label="批次号" width="180">
          </el-table-column>
          <el-table-column prop="relation_type" label="批次类型" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.relation_type | afterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="承运开始时间" width="180">
            <template slot-scope="scope">
              <span v-time="scope.row.create_time"></span>
            </template>
          </el-table-column>
          <el-table-column prop="carrier_name" label="承运商" width="180">
          </el-table-column>
          <el-table-column prop="money" label="金额(元)" width="80">
          </el-table-column>
          <el-table-column prop="" label="附件" width="200">
            <template slot-scope="scope">
              <div :key="index" v-for="(item, index) in scope.row.enclosure">
                <a @click="() => handleOpen(item.url)" class="upload-name">
                  <i class="el-icon-document"></i>{{ item.url }}
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="waybill_no" label="运单号" width="120">
            <template slot-scope="scope">
              <div
                style="cursor: pointer; color: blue"
                @click="handleJump(scope)"
              >
                {{ scope.row.waybill_no }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="waybill_product_type"
            label="承运类型"
            width="80"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-table
          :data="ruleForm.expenditure_list"
          border
          style="width: 100%"
          @selection-change="tableRowClassName"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="fee_id" label="费项">
            <template slot-scope="scope">
              <!-- <el-select v-model="scope.row.fee_id" filterable placeholder="请选择">
                        <el-option v-for="item in travelExpenseList" :key="item.item_code" :label="item.item_name"
                            :value="item.item_code">
                        </el-option>
                    </el-select> -->
              {{ travelExpenseList[scope.row.fee_id] }}
            </template>
          </el-table-column>
          <el-table-column prop="fee_detail" label="费项明细">
            <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.fee_detail"></el-input>
              </template> -->
            <!-- {{}} -->
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180">
            <template slot-scope="scope">
              <!-- <el-date-picker v-model="scope.row.date" type="datetime" value-format="timestamp" placeholder="选择日期时间" default-time="12:00:00" :default-value="new Date()">
                </el-date-picker> -->
              <span v-time="scope.row.date"></span>
            </template>
          </el-table-column>
          <el-table-column prop="money" label="金额"> </el-table-column>
          <el-table-column prop="" label="附件" width="200">
            <template slot-scope="scope">
              <div
                :key="index"
                v-for="(item, index) in scope.row.enclosure_list"
              >
                <a @click="() => handleOpen(item.url)" class="upload-name">
                  <i class="el-icon-document"></i>{{ item.url }}
                </a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <div
      style="margin-top: 20px; text-align: right; padding-bottom: 20px"
      v-permission="'examine_record_update'"
    >
      <el-button data-tracker="P41-5" type="danger" @click="handleAudit('2')"
        >打回</el-button
      >
      <el-button data-tracker="P41-4" type="success" @click="handleAudit('1')"
        >通过</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  ExamineRecordUpdate,
  PayableDetail,
  ReimburseDetail,
} from "@/api/auditing";
import { dictionanryList } from "@/page/material/common/common";

export default {
  name: "auditRecord",
  components: {},
  props: ["info"],
  data() {
    return {
      ruleForm: null,
      travelExpenseList: [],
      revenue_type_list: [],
      spanValcheckedRows: [],
    };
  },
  watch: {
    spanValcheckedRows: {
      deep: true,
      handler() {
        var loaMoery = 0;
        if (this.spanValcheckedRows != null) {
          this.spanValcheckedRows.forEach((val, index) => {
            // loaMoery += val.total_expenses * 1
            if (val.collapseNumber != "0") {
              loaMoery += val.total_expenses * 1;
            }
          });
          this.collectMoeny = loaMoery;
        }
      },
    },
  },
  filters: {
    afterTime(value) {
      switch (value) {
        case "1":
          return "揽收";
        case "2":
          return "干线";
        case "3":
          return "配送";
        case "4":
          return "回单";
        case "5":
          return "回箱";
      }
    },
  },
  mounted() {
    // console.log(this.info);
    if (this.info.scene_type === "1") {
      dictionanryList(["revenue_type"]).then((result2) => {
        if (result2.code === 10000) {
          const data = result2.data.list["revenue_type"];
          data.forEach((item) => {
            const { item_code, item_name } = item;
            this.revenue_type_list[item_code] = item_name;
          });
        }
      });
      PayableDetail({ id: this.info.callback_id }).then((res) => {
        const data = res.data;
        data.carrier_invoice_body = data.carrier_invoice_body || {};
        data.company_invoice_body = data.company_invoice_body || {};
        this.ruleForm = data || {};
      });
    } else if (this.info.scene_type === "2") {
      dictionanryList(["travelExpense"]).then((res) => {
        const data = res.data.list["travelExpense"];
        data.forEach((item) => {
          const { item_code, item_name } = item;
          this.travelExpenseList[item_code] = item_name;
        });
        // this.travelExpenseList = res.data.list["travelExpense"];
      });
      ReimburseDetail({ id: this.info.callback_id + "" }).then((res) => {
        this.ruleForm = res.data || { carry_all_data: [] };
        this.ruleForm.carry_all_data.forEach((item, index) => {
          item.forEach((item2, index2) => {
            //item2是合并行里面的运单数据
            if (index2 === 0) {
              this.$set(item2, "collapseNumber", item.length); //应该合并几列
            } else {
              this.$set(item2, "collapseNumber", 0); //其余的不显示，标为0
            }
            this.$set(item2, "index", index); //操作单的索引
          });
        });
        this.spanValcheckedRows = this.ruleForm.carry_all_data.flat(2);
        if (this.spanValcheckedRows != null) {
          var loaMoery = 0;
          this.spanValcheckedRows.forEach((val, index) => {
            // loaMoery += val.total_expenses * 1
            if (val.collapseNumber != "0") {
              loaMoery += val.total_expenses * 1;
            }
          });
          this.collectMoeny = loaMoery;
        }
      });
    }
  },
  methods: {
    handleOpen(href) {
      window.open(href, "_blank");
    },
    tableRowClassName() {},
    async handleJump(scope) {
      //跳转到对应运单详情
      const checkedOrder = scope.row;
      const { waybill_id } = checkedOrder;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id: waybill_id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    objectSpanMethodspan({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 5 ||
        columnIndex === 6
      ) {
        //列的index
        //当xxx的时候合并rowspan行0列
        if (row.collapseNumber > 0) {
          return {
            rowspan: row.collapseNumber,
            colspan: 1,
          };
        } else {
          return {
            //表示这一行不显示
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    handleAudit(status) {
      if (this.info.status !== 0) {
        this.$message({
          message: "待审核状态才能操作",
          type: "warning",
        });
        return;
      }
      ExamineRecordUpdate({
        id: this.info.id + "", // 审核记录id
        status: status, // 是否通过1通过 2打回
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: status === "1" ? "审核通过成功" : "打回成功",
            type: "success",
          });
          this.$emit("close", true);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 10px;

  .over-text {
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .over-text2 {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -20px;
  }

  .upload-demo {
    width: 500px;
  }

  .upload-name {
    cursor: pointer;
    display: block;
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: blue;
  }

  .upload-name1 {
    cursor: pointer;
    display: block;
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: blue;
  }
}
</style>